<template>
  <view class="login-container">
    <view class="logo">
      <image class="logo-pic" src="@/static/images/logo.png" mode="widthFix" />
    </view>
    <view class="title"> 书 香 逸 居 登 录 </view>
    <view class="content">
      <!-- 登录表单开始 -->
      <view class="form">
        <view class="form-item">
          <uni-easyinput type="digit" v-model="mobile" :trim="true" prefixIcon="person-filled" maxlength="11" placeholder="请输入手机号" @input="setErrorEmpty('mobile')"></uni-easyinput>
          <view class="error-text" v-if="mobileError">
            {{ mobileError }}
          </view>
        </view>

        <view class="form-item">
          <uni-easyinput type="password" :trim="true" prefixIcon="locked-filled" v-model="password" maxlength="16" placeholder="请输入密码" @input="setErrorEmpty('password')"></uni-easyinput>
          <view class="error-text" v-if="passwordError">
            {{ passwordError }}
          </view>
        </view>
      </view>
      <!-- 登录表单结束 -->
      <!-- 忘记密码\注册账号开始 -->
      <view class="forget">
        <view class="remember-password">
          <label> <checkbox value="cb" :checked="remember_pwd" style="transform: scale(0.6)" color="#1a5276" />记住密码 </label>
        </view>
        <view class="account">
          <view class="forget-password" @click="forgetPassword"> 忘记密码？ </view>
          <view class="register" @click="toRegister"> 注册账号 </view>
        </view>
      </view>

      <!-- 忘记密码\注册账号结束 -->
      <!-- 登录开始 -->
      <view class="login">
        <button class="btn" type="primary" @click="login">登录</button>
      </view>
      <!-- 登录结束 -->
    </view>

    <!-- 版权声明开始 -->
    <view class="permission"> · 版权声明 · </view>
    <!-- 版权声明结束 -->

    <Transition name="toast">
      <Toast v-if="globalLoading"></Toast>
    </Transition>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'
import { encrypt_password } from '@/utils/aesEncode'
import { UserTypes } from '@/store/actions_types/actions_types'

export default Vue.extend({
  data() {
    return {
      mobile: '',
      password: '',
      remember_pwd: true,
      mobileError: '',
      passwordError: ''
    }
  },
  onLoad() {},
  computed: {
    ...mapState('user', ['globalLoading'])
  },
  methods: {
    async login() {
      // 验证手机号和登录密码是否正确
      if (!this.mobile) {
        return (this.mobileError = '请输入手机号')
      }
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        return (this.mobileError = '手机号格式错误')
      }
      if (!this.password) {
        return (this.passwordError = '请输入密码')
      }
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.password)) {
        return (this.passwordError = '密码为数字字母组合,长度为6-16位')
      }
      // 对密码进行aes加密
      const aes_password = encrypt_password(this.password, this.mobile)
      this.$store.commit(`user/${UserTypes.SET_LOADING}`, true)
      // 发起请求进行登录
      this.$store.dispatch(`user/${UserTypes.LOGIN}`, { mobile: this.mobile, password: aes_password })
    },
    // 将错误信息置空
    setErrorEmpty(val: string) {
      if (val === 'mobile') {
        this.mobileError = ''
      } else {
        this.passwordError = ''
      }
    },
    // 找回密码
    forgetPassword() {
      uni.navigateTo({
        url: '/pages/forget/forget'
      })
    },
    // 前往注册页面
    toRegister() {
      uni.navigateTo({
        url: `/pages/register/register`
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  font-family: 'aliregular';
  background: linear-gradient(to bottom, rgba(26, 82, 118, 0.2), rgba(26, 82, 118, 0.4), rgba(26, 82, 118, 0.6), rgba(26, 82, 118, 0.8), rgba(26, 82, 118, 1));
  color: #fff;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30rpx;

    .logo-pic {
      width: 280rpx;
    }
  }
  .title {
    font-size: 44rpx;
    font-weight: 500;
    text-align: center;
  }
  .content {
    padding: 60rpx;
    .form {
      .form-item {
        margin-bottom: 20rpx;

        .error-text {
          color: red;
          font-size: 24rpx;
          margin-top: 10rpx;
          margin-left: 20rpx;
        }

        ::v-deep .uni-easyinput__content {
          background-color: $uni-theme-color !important;
          color: #fff;
          caret-color: #fff;
        }

        ::v-deep .is-input-border {
          border-radius: 999rpx;
          border-color: $uni-theme-color !important;
        }
        ::v-deep .is-focused {
          border-color: #fff !important;
        }

        ::v-deep .uni-icons {
          color: #c0c4cc !important;
        }
      }
    }

    .forget {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;

      .remember-password {
        label {
          display: flex;
          align-items: center;
        }
      }

      .account {
        display: flex;
        align-items: center;

        .forget-password {
          margin-right: 20rpx;
        }
      }
    }

    .login {
      margin-top: 120rpx;
      .btn {
        background-color: $uni-theme-color;
        color: #fff;
        border-radius: 999rpx;
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
  .permission {
    font-size: 24rpx;
    position: fixed;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
